<template>
  <div class="h-detail-container">
    <div class="bill-content" id="printSection">
      <!-- 标题 -->
      <h1 class="title">订单明细</h1>

      <!-- 基本信息 -->
      <div class="basic-info">
        <div class="info-row">
          <div class="info-item">
            <span class="label">逝者姓名：</span>
            <span class="value-line">{{ orderDetail.deceasedName }}</span>
          </div>
          <div class="info-item">
            <span class="label">性别：</span>
            <span class="value-line">
              <template v-if="orderDetail.deceasedGender === 1">男</template>
              <template v-else>女</template>
            </span>
          </div>
        </div>
        <div class="info-row">
          <div class="info-item">
            <span class="label">服务日期：</span>
            <span class="value-line">{{ orderDetail.serviceDate }}</span>
          </div>
          <div class="info-item">
            <span class="label">地点：</span>
            <span class="value-line">{{ orderDetail.serviceLocation }}</span>
          </div>
        </div>
      </div>

      <!-- 费用明细表格 -->
      <div class="bill-table">
        <div class="table-title">殡仪收费项目明细</div>
        <table>
          <thead>
          <tr>
            <th width="50">序号</th>
            <th width="80">类别</th>
            <th width="150">子类</th>
            <th width="500">项目</th>
            <th width="100">数量</th>
            <th width="180">单价</th>
            <th width="180">折扣</th>
            <th width="200">金额</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item, index) in orderDetail.items" :key="index">
            <td>{{ index + 1 }}</td>
            <td v-if="shouldShowCell(index, 'categoryLevel1')" :rowspan="getRowspan(index, 'categoryLevel1')">
              {{ item.categoryLevel1 }}
            </td>
            <td v-if="shouldShowCell(index, 'categoryLevel2')" :rowspan="getRowspan(index, 'categoryLevel2')">
              {{ item.categoryLevel2 }}
            </td>
            <td class="text-left">{{ item.productName }}</td>
            <td>{{ item.productQuantity }}</td>
            <td>{{ item.productPrice }}</td>
            <td>{{ item.discountValue }}</td>
<!--            <td>{{ item.productQuantity * item.productPrice }}</td>-->
            <td>{{ item.finalPrice }}</td>
          </tr>
          </tbody>
        </table>

        <div class="total-amount">
          合计金额：{{ orderDetail.orderAmount }} 元
        </div>
        <div class="total-amount">
          折扣后金额：{{ orderDetail.orderRealAmount }} 元
        </div>
      </div>

      <!-- 底部信息 -->
      <div class="footer-info">
        <div class="payment-method">
          <span class="label">支付方式：</span>
          <span class="value-line">
            <template v-if="orderDetail.paymentMethod === 1">现金</template>
            <template v-if="orderDetail.paymentMethod === 2">微信</template>
            <template v-if="orderDetail.paymentMethod === 3">支付宝</template>
            <template v-if="orderDetail.paymentMethod === 4">银行卡</template>
          </span>
        </div>

        <div class="signature-row">
          <div class="signature-item">
            <span class="label2">家属：</span>
            <span class="value-line2">{{ orderDetail.familyContact }}</span>
          </div>
          <div class="signature-item">
            <span class="label2">电话：</span>
            <span class="value-line2">{{ orderDetail.familyPhone }}</span>
          </div>
        </div>

        <div class="signature-row">
          <div class="signature-item">
            <span class="label2">礼仪师：</span>
            <span class="value-line2">{{ orderDetail.masterName }}</span>
          </div>
          <div class="signature-item">
            <span class="label2">电话：</span>
            <span class="value-line2">{{ orderDetail.masterPhone }}</span>
          </div>
        </div>

        <div class="footer-btn">
          <el-button @click="onClose">关 闭</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script src="./detail.js" />

<style lang="scss" scoped src="./detail.scss" />